<template>
  <div>
    <div class="movieItem" @click="click">
      <img class="cover" :src="value.pic" alt />
      <div class="name">{{value.title}}</div>
      <div class="box">
        <div v-for="item in arr" :key="item.index">
          <img class="star" v-if="item>=1" src="../assets/images/icon/star.png" />
          <img class="star" v-else src="../assets/images/icon/none-star.png" />
        </div>
        <span class="raiting">{{value.raiting}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import history from "../models/history"
export default {
  name: "MovieItem",
  props: {
    value: Object
  },
  data() {
    return {
      arr: []
    };
  },
  mounted() {
    var value = this.value;
    // 在组件实例进入页面节点树时执行
    this.transformStart(this.value.raiting);
    value.title = this.title(this.value.title);
    this.value = value;
    //
  },
  methods: {
    transformStart(num) {
      let arr = [];
      for (let i = 0; i < 5; i++) {
        if (num > 2) {
          arr.push(2);
        } else if (num > 0) {
          arr.push(Number(num.toFixed(1)));
        } else {
          arr.push(0);
        }
        num = num - 2;
      }
      this.arr = arr;
    },

    // 标题超过长度用。。。
    title(key) {
      if (key.length >= 5) {
        key = key.slice(0, 5) + "...";
      }
      return key;
    },
    // 给详情页传值
    async click() {
      let id = this.value._id;
      await history("top250",id)
      this.$router.push({ name: "MovieDetail", query: { id: id } });
    }
  }
};
</script>

<style scoped>
.box image {
  width: 30px;
  height: 30px;
}
.movieItem {
  width: 220px;
  margin-bottom: 30px;
}
.cover {
  width: 220px;
  height: 300px;
}
.name {
  color: #888;
  margin: 10px 0;
  font-size: 26px;
}
.raiting {
  margin-left: 10px;
  font-size: 25px;
  color: #888;
}
.box {
  display: flex;
}
.star{
  width: 30px;
}
</style>